/* 图标默认样式 - 自动应用到所有图标组件 */
.icon {
  width: 14px;
  height: 14px;
  color: white;
  fill: white;
}

/* Element Plus 菜单项样式覆盖 - 使用更高优先级的选择器 */
.el-menu .el-menu-item {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-radius: 6px !important;
  margin: 2px 8px !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}

.el-menu .el-menu-item:hover {
  background-color: var(--hover-bg) !important;
  transform: translateX(4px) !important;
  box-shadow: var(--hover-shadow) !important;
}

.el-menu .el-menu-item.is-active {
  background-color: var(--hover-bg) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-medium) !important;
  transform: translateX(4px) !important;
}

.el-menu .el-menu-item.is-active::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  border-radius: 0 2px 2px 0 !important;
}

.el-menu .el-menu-item .el-icon {
  color: inherit !important;
  margin-right: 8px !important;
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

.el-menu .el-menu-item span {
  color: inherit !important;
  font-size: 14px !important;
  font-weight: inherit !important;
}

.el-menu .el-menu-item.is-active .el-icon {
  color: var(--bg-primary) !important;
  fill: var(--bg-primary) !important;
}

.el-menu .el-menu-item:hover .el-icon {
  color: var(--primary-color) !important;
  fill: var(--primary-color) !important;
}

/* 更具体的选择器确保覆盖 */
.side-menu .el-menu .el-menu-item {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

.side-menu .el-menu .el-menu-item:hover {
  background-color: var(--hover-bg) !important;
  color: var(--primary-color) !important;
  transform: translateX(4px) !important;
  box-shadow: var(--hover-shadow) !important;
}

.side-menu .el-menu .el-menu-item.is-active {
  background-color: var(--primary-color) !important;
  color: var(--bg-primary) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-medium) !important;
}

/* Element Plus 按钮主题覆盖 */
.el-button--primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--btn-text-primary) !important;
}

.el-button--primary:hover {
  background-color: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
  color: var(--btn-text-primary) !important;
}

.el-button--primary:active {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--btn-text-primary) !important;
  opacity: 0.8 !important;
}

.el-button--primary:focus {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--btn-text-primary) !important;
}

.el-button--primary.is-disabled {
  background-color: var(--btn-primary-disabled-bg) !important;
  border-color: var(--btn-primary-disabled-bg) !important;
  color: var(--btn-text-primary) !important;
  opacity: 0.6 !important;
}

/* 次要按钮样式 */
.el-button--default {
  background-color: var(--btn-secondary-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--btn-text-primary) !important;
}

.el-button--default:hover {
  background-color: var(--btn-secondary-hover-bg) !important;
  border-color: var(--btn-secondary-hover-bg) !important;
  color: var(--btn-text-primary) !important;
}

.el-button--default:active {
  background-color: var(--btn-secondary-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--btn-text-primary) !important;
  opacity: 0.8 !important;
}

/* 成功按钮样式 */
.el-button--success {
  background-color: var(--btn-success-bg) !important;
  border-color: var(--btn-success-bg) !important;
  color: var(--btn-text-primary) !important;
}

.el-button--success:hover {
  background-color: var(--btn-success-hover-bg) !important;
  border-color: var(--btn-success-hover-bg) !important;
  color: var(--btn-text-primary) !important;
}

.el-button--success:active {
  background-color: var(--btn-success-bg) !important;
  border-color: var(--btn-success-bg) !important;
  color: var(--btn-text-primary) !important;
  opacity: 0.8 !important;
}

/* 警告按钮样式 */
.el-button--warning {
  background-color: var(--btn-warning-bg) !important;
  border-color: var(--btn-warning-bg) !important;
  color: var(--btn-text-primary) !important;
}

.el-button--warning:hover {
  background-color: var(--btn-warning-hover-bg) !important;
  border-color: var(--btn-warning-hover-bg) !important;
  color: var(--btn-text-primary) !important;
}

.el-button--warning:active {
  background-color: var(--btn-warning-bg) !important;
  border-color: var(--btn-warning-bg) !important;
  color: var(--btn-text-primary) !important;
  opacity: 0.8 !important;
}

/* 危险按钮样式 */
.el-button--danger {
  background-color: var(--btn-error-bg) !important;
  border-color: var(--btn-error-bg) !important;
  color: var(--btn-text-primary) !important;
}

.el-button--danger:hover {
  background-color: var(--btn-error-hover-bg) !important;
  border-color: var(--btn-error-hover-bg) !important;
  color: var(--btn-text-primary) !important;
}

.el-button--danger:active {
  background-color: var(--btn-error-bg) !important;
  border-color: var(--btn-error-bg) !important;
  color: var(--btn-text-primary) !important;
  opacity: 0.8 !important;
}

/* 信息按钮样式 */
.el-button--info {
  background-color: var(--info-color) !important;
  border-color: var(--info-color) !important;
  color: var(--btn-text-primary) !important;
}

.el-button--info:active {
  background-color: var(--info-color) !important;
  border-color: var(--info-color) !important;
  color: var(--btn-text-primary) !important;
  opacity: 0.8 !important;
}

/* 文字按钮样式 */
.el-button--text {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--btn-text-primary) !important;
}

.el-button--text:hover {
  background-color: var(--primary-glass) !important;
  color: var(--btn-text-primary) !important;
}

.el-button--text:active {
  background-color: var(--primary-glass) !important;
  color: var(--btn-text-primary) !important;
  opacity: 0.8 !important;
}

/* Element Plus 表格主题覆盖 */
.el-table {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* 表头样式 */
.el-table__header-wrapper {
  background-color: var(--table-header-bg) !important;
}

.el-table__header {
  background-color: var(--table-header-bg) !important;
}

.el-table__header th {
  background-color: var(--table-header-bg) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--table-border) !important;
}

.el-table__header th .cell {
  color: var(--text-primary) !important;
}

.el-table__header th.is-leaf {
  background-color: var(--table-header-bg) !important;
  color: var(--text-primary) !important;
}

.el-table__header th.is-sortable {
  background-color: var(--table-header-bg) !important;
  color: var(--text-primary) !important;
}

.el-table__header th.is-sortable:hover {
  background-color: var(--table-header-bg) !important;
  color: var(--text-primary) !important;
}

.el-table__body-wrapper {
  background-color: var(--card-bg) !important;
}

/* 表格行样式 */
.el-table__body tr {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

.el-table__body tr:hover {
  background-color: var(--table-row-hover) !important;
  color: var(--text-primary) !important;
}

.el-table__body tr:nth-child(even) {
  background-color: var(--table-row-even) !important;
}

.el-table__body tr:nth-child(even):hover {
  background-color: var(--table-row-hover) !important;
  color: var(--text-primary) !important;
}

/* 表格单元格样式 */
.el-table td,
.el-table th {
  border-bottom: 1px solid var(--table-border) !important;
  color: var(--text-primary) !important;
  background-color: inherit !important;
}

/* 确保悬浮时单元格也使用正确的颜色 */
.el-table__body tr:hover td {
  background-color: var(--table-row-hover) !important;
  color: var(--text-primary) !important;
}

.el-table__body tr:nth-child(even):hover td {
  background-color: var(--table-row-hover) !important;
  color: var(--text-primary) !important;
}

/* Element Plus 输入框主题覆盖 */
.el-input__wrapper {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-primary) !important;
}

.el-input__wrapper:hover {
  border-color: var(--primary-color) !important;
}

.el-input__wrapper.is-focus {
  border-color: var(--input-focus-border) !important;
  box-shadow: var(--input-focus-shadow) !important;
}

.el-input__inner {
  color: var(--text-primary) !important;
}

.el-input__inner::placeholder {
  color: var(--text-tertiary) !important;
}

/* Element Plus 下拉框主题覆盖 */
.el-select .el-input__wrapper {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
}

.el-select__wrapper {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-primary) !important;
}

.el-select__wrapper:hover {
  border-color: var(--primary-color) !important;
}

.el-select__wrapper.is-focus {
  border-color: var(--input-focus-border) !important;
  box-shadow: var(--input-focus-shadow) !important;
}

.el-select-dropdown {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-medium) !important;
}

.el-select-dropdown__item {
  color: var(--text-primary) !important;
}

.el-select-dropdown__item:hover {
  background-color: var(--table-row-hover) !important;
}

.el-select-dropdown__item.is-selected {
  background-color: var(--primary-glass) !important;
  color: var(--primary-color) !important;
}

/* Element Plus 日期选择器主题覆盖 */
.el-date-picker {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-medium) !important;
}

.el-date-picker__header {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

.el-date-picker__header button {
  color: var(--text-primary) !important;
}

.el-date-picker__header button:hover {
  color: var(--primary-color) !important;
}

.el-date-picker__content {
  background-color: var(--card-bg) !important;
}

.el-picker-panel__content {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

.el-date-table td {
  color: var(--text-primary) !important;
}

.el-date-table-cell {
  color: var(--text-primary) !important;
}

.el-date-table td .el-date-table-cell {
  color: var(--text-primary) !important;
  background-color: transparent !important;
}

.el-date-table td .el-date-table-cell:hover {
  background-color: var(--table-row-hover) !important;
  color: var(--text-primary) !important;
}

.el-date-table td .el-date-table-cell.current {
  background-color: var(--primary-color) !important;
  color: var(--bg-primary) !important;
}

.el-date-table td .el-date-table-cell.today {
  color: var(--primary-color) !important;
}

.el-date-table td .el-date-table-cell.available:hover {
  background-color: var(--primary-glass) !important;
  color: var(--text-primary) !important;
}

.el-date-table-cell:hover {
  background-color: var(--table-row-hover) !important;
}

.el-date-table-cell.current {
  background-color: var(--primary-color) !important;
  color: var(--bg-primary) !important;
}

.el-date-table-cell.today {
  color: var(--primary-color) !important;
}

.el-date-table-cell.available:hover {
  background-color: var(--primary-glass) !important;
}

.el-date-table td:hover {
  background-color: var(--table-row-hover) !important;
}

.el-date-table td.current {
  background-color: var(--primary-color) !important;
  color: var(--bg-primary) !important;
}

.el-date-table td.today {
  color: var(--primary-color) !important;
}

.el-date-table td.available:hover {
  background-color: var(--primary-glass) !important;
}

/* 更多日期选择器相关样式 */
.el-picker-panel {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

.el-picker-panel__body {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

.el-picker-panel__body-wrapper {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

.el-date-range-picker {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

.el-date-range-picker__header {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

.el-date-range-picker__header button {
  color: var(--text-primary) !important;
}

.el-date-range-picker__header button:hover {
  color: var(--primary-color) !important;
}

.el-date-range-picker__content {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

.el-picker-panel__icon-btn {
  color: var(--text-primary) !important;
}

.el-picker-panel__icon-btn:hover {
  color: var(--primary-color) !important;
}

.el-picker-panel__link-btn {
  color: var(--text-primary) !important;
}

.el-picker-panel__link-btn:hover {
  color: var(--primary-color) !important;
}

.el-date-picker__header-label {
  color: var(--text-primary) !important;
}

.el-date-picker__header-label:hover {
  color: var(--primary-color) !important;
}

.el-picker-panel__sidebar {
  background-color: var(--card-bg) !important;
  border-right: 1px solid var(--border-color) !important;
}

.el-picker-panel__sidebar .el-picker-panel__shortcut {
  color: var(--text-primary) !important;
}

.el-picker-panel__sidebar .el-picker-panel__shortcut:hover {
  background-color: var(--table-row-hover) !important;
  color: var(--primary-color) !important;
}

/* 时间选择器相关 */
.el-time-picker-panel {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

.el-time-picker-panel__content {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

.el-time-picker-panel__footer {
  background-color: var(--card-bg) !important;
  border-top: 1px solid var(--border-color) !important;
}

.el-time-picker-panel__footer button {
  color: var(--text-primary) !important;
}

.el-time-picker-panel__footer button:hover {
  color: var(--primary-color) !important;
}

/* Element Plus 时间选择器主题覆盖 */
.el-time-picker {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-medium) !important;
}

.el-time-picker__content {
  background-color: var(--card-bg) !important;
}

.el-time-spinner__item {
  color: var(--text-primary) !important;
}

.el-time-spinner__item:hover {
  background-color: var(--table-row-hover) !important;
}

.el-time-spinner__item.active {
  background-color: var(--primary-color) !important;
  color: var(--bg-primary) !important;
}

/* Element Plus 数字输入框主题覆盖 */
.el-input-number {
  background-color: var(--input-bg) !important;
}

.el-input-number .el-input__wrapper {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
}

.el-input-number .el-input-number__increase,
.el-input-number .el-input-number__decrease {
  background-color: var(--input-bg) !important;
  color: var(--text-primary) !important;
  border-left: 1px solid var(--input-border) !important;
}

.el-input-number .el-input-number__increase:hover,
.el-input-number .el-input-number__decrease:hover {
  background-color: var(--table-row-hover) !important;
  color: var(--primary-color) !important;
}

/* Element Plus 文本域主题覆盖 */
.el-textarea__inner {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-primary) !important;
}

.el-textarea__inner:hover {
  border-color: var(--primary-color) !important;
}

.el-textarea__inner:focus {
  border-color: var(--input-focus-border) !important;
  box-shadow: var(--input-focus-shadow) !important;
}

.el-textarea__inner::placeholder {
  color: var(--text-tertiary) !important;
}

/* Element Plus 开关主题覆盖 */
.el-switch__core {
  background-color: var(--border-color) !important;
  border: 1px solid var(--border-color) !important;
}

.el-switch.is-checked .el-switch__core {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.el-switch__action {
  background-color: var(--bg-primary) !important;
}

/* Element Plus 滑块主题覆盖 */
.el-slider__runway {
  background-color: var(--border-color) !important;
}

.el-slider__bar {
  background-color: var(--primary-color) !important;
}

.el-slider__button {
  background-color: var(--primary-color) !important;
  border: 2px solid var(--bg-primary) !important;
}

.el-slider__button:hover {
  background-color: var(--primary-light) !important;
}

/* Element Plus 评分主题覆盖 */
.el-rate__icon {
  color: var(--border-color) !important;
}

.el-rate__icon.is-active {
  color: var(--primary-color) !important;
}

/* Element Plus 进度条主题覆盖 */
.el-progress-bar__outer {
  background-color: var(--border-color) !important;
}

.el-progress-bar__inner {
  background-color: var(--primary-color) !important;
}

/* Element Plus 标签主题覆盖 */
.el-tag {
  background-color: var(--primary-glass) !important;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
}

.el-tag--success {
  background-color: var(--btn-success-bg) !important;
  color: var(--btn-success-color) !important;
  border-color: var(--btn-success-bg) !important;
}

.el-tag--warning {
  background-color: var(--btn-warning-bg) !important;
  color: var(--btn-warning-color) !important;
  border-color: var(--btn-warning-bg) !important;
}

.el-tag--danger {
  background-color: var(--btn-error-bg) !important;
  color: var(--btn-error-color) !important;
  border-color: var(--btn-error-bg) !important;
}

.el-tag--info {
  background-color: var(--info-color) !important;
  color: var(--bg-primary) !important;
  border-color: var(--info-color) !important;
}
/* Element Plus 对话框主题覆盖 */
.el-dialog {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-heavy) !important;
}

.el-dialog__header {
  background-color: var(--card-bg) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.el-dialog__title {
  color: var(--text-primary) !important;
}

.el-dialog__body {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

.el-dialog__footer {
  background-color: var(--card-bg) !important;
  border-top: 1px solid var(--border-light) !important;
}

.el-dialog__headerbtn {
  color: var(--text-secondary) !important;
}

.el-dialog__headerbtn:hover {
  color: var(--primary-color) !important;
}

.el-dialog__close {
  color: var(--text-secondary) !important;
}

.el-dialog__close:hover {
  color: var(--primary-color) !important;
}

/* 对话框遮罩层 */
.el-overlay {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.el-overlay-dialog {
  background-color: transparent !important;
}

.el-form {
  color: var(--text-primary) !important;
}

/* ===== Drawer 抽屉样式 ===== */
.el-drawer {
  background-color: var(--bg-primary) !important;
  border-left: 1px solid var(--border-color) !important;
}

.el-drawer__header {
  padding: 20px 24px 16px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
  background-color: var(--bg-primary) !important;
}

.el-drawer__title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

.el-drawer__close-btn {
  color: var(--text-secondary) !important;
  font-size: 20px !important;
  transition: color 0.3s ease !important;
}

.el-drawer__close-btn:hover {
  color: var(--primary-color) !important;
}

.el-drawer__body {
  padding: 24px !important;
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  overflow-y: auto !important;
}

/* 抽屉遮罩层 */
.el-overlay-drawer {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* 自定义抽屉样式 */
.settings-drawer {
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1) !important;
}

.settings-drawer .el-drawer__header {
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
}

.settings-drawer .el-drawer__body {
  background: var(--bg-primary) !important;
}
